<template>
  <tiny-layout class="tiny-layout-tag1">
    <tiny-row tag="span">
      <tiny-col :span="3">
        <div class="col">
            <div>应用名称</div>
            <div>{{data.overview.appName}}</div>
        </div>
      </tiny-col>
      <tiny-col :span="3">
        <div class="col">
            <div><span>MasterIP: </span><span>{{data.overview.webServerInfo.ip}}</span></div>
            <div><span>启动时间: </span><span>{{data.overview.webServerInfo.bornTime}}</span></div>
        </div>
      </tiny-col>
      <tiny-col :span="3">
        <div class="col">
            <div><span>服务器时区: </span><span>{{data.overview.timezone}}</span></div>
            <div><span>服务器时间: </span><span>{{data.overview.serverTime}}</span></div>
        </div>
      </tiny-col>
      <tiny-col :span="3">
        <div class="col">
            <div><span>本地时区: </span><span>Asia/Shanghai</span></div>
            <div><span>本地时间: </span><span>{{data.overview.webServerInfo.ip}}</span></div>
        </div>
      </tiny-col>
    </tiny-row>
    <tiny-row tag="span" class="row-style">
      <tiny-col :span="3">
        <div class="col">
            <div>任务总数</div>
            <div>{{data.overview.jobCount}}</div>
        </div>
      </tiny-col>
      <tiny-col :span="3">
        <div class="col">
            <div>当前运行实例数</div>
            <div>{{data.overview.runningInstanceCount}}</div>
        </div>
      </tiny-col>
      <tiny-col :span="3">
        <div class="col">
            <div>近期失败任务数</div>
            <div>{{data.overview.failedInstanceCount}}</div>
        </div>
      </tiny-col>
      <tiny-col :span="3">
        <div class="col">
            <div>集群机器数</div>
            <div>{{data.workNum}}</div>
        </div>
      </tiny-col>
    </tiny-row>
  </tiny-layout>
  <tiny-row :flex="true" class="server-title">
        <tiny-col :span="2" :no="1"> 机器地址</tiny-col>
        <tiny-col :span="2" :no="1"> CPU占用</tiny-col>
        <tiny-col :span="2" :no="1"> 内存占用</tiny-col>    
        <tiny-col :span="2" :no="1"> 磁盘占用</tiny-col>
        <tiny-col :span="2" :no="1"> tag</tiny-col>
        <tiny-col :span="2" :no="1"> 上次在线时间</tiny-col>
    </tiny-row>
  <template v-for="(item) in data.work">
        <tiny-divider class="hr-style"></tiny-divider>
        <tiny-row :flex="true" class="server-row">
            <tiny-col :span="2" :no="1"> {{ item.address }}</tiny-col>
            <tiny-col :span="2" :no="1"> {{ item.cpuLoad }}</tiny-col>
            <tiny-col :span="2" :no="1"> {{ item.memoryLoad }}</tiny-col>
            <tiny-col :span="2" :no="1"> {{ item.diskLoad }}</tiny-col>
            <tiny-col :span="2" :no="1"> {{ item.tag }}</tiny-col>
            <tiny-col :span="2" :no="1"> {{ item.lastActiveTime }}</tiny-col>
        </tiny-row>
        <tiny-divider class="hr-style"></tiny-divider>
        </template>
</template>

<script setup>
  import {reactive, ref, getCurrentInstance,onMounted,onBeforeMount} from 'vue';  
  import { TinyCollapse, TinyCollapseItem ,TinySwitch ,Modal} from '@opentiny/vue'
  const {proxy} = getCurrentInstance();
  import {cosSystem} from '@/stores/system.js';
  let store = cosSystem();
  onBeforeMount(()=>{
      if(!store.getAppId){
        Modal.message({ message: '请先选择一个应用', status: 'warning' })
        proxy.$router.push({path:'/sys/powerJob/app'});
      }
      data.appId = store.getAppId;
  })
  const data = reactive({
    overview:{webServerInfo:{},scheduleServerInfo:{},timezone:'',serverTime:'',appName:''},
    work:[],
    appId:'',
    workNum:0,
    })
    const getOverview = ()=>{
      proxy.$api.taskJob.getOverview(data.appId).then(res=>{
        data.overview = res.data
      })
    }
    const listWork = ()=>{
      proxy.$api.taskJob.listWorker(data.appId).then(res=>{
        console.log(res)
        data.work = res.data
        let num = 0;
        res.data.forEach(w => {
            if (w.status !== 9999) {
                num++;
            }
        })
        data.workNum = num;
      })
    }
    onMounted(()=>{
      getOverview()
      listWork()
    })
</script>
<style lang="scss" scoped>
.row-style{
  margin-top: 20px;
}
.col{
  height: 80px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.hr-style{
   margin: 10px 0;
}
.server-row{
    color: green;
}
.server-title{
  padding-top: 10px;
  height: 30px;
}
.col {
  line-height: 30px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

</style>